import { Button, Modal } from 'antd';
import { SvgIcon } from '@/components/icon';
import { useRouter } from '@/router/hooks';
import useWindowWidth from '@/hooks/event/use-window-width';
import { LeftOutlined } from '@ant-design/icons';

type Props = {
  title?: string;
  size?: number;
  confirmMessage?: string;
  onBack?: () => void;
};

export default function Back({ title, size, confirmMessage, onBack }: Props) {
  const router = useRouter();
  const { isPc } = useWindowWidth();

  const titleStyle: React.CSSProperties = {
    fontSize: '16px',
    fontWeight: "bold",
    color: '#1D2129',
  };

  const handleBack = () => {
    if (confirmMessage) {
      Modal.confirm({
        title: '确认返回',
        content: confirmMessage,
        okButtonProps: {
          style: {
            backgroundColor: '#6640FF',
            borderColor: '#6640FF'
          }
        },
        onOk() {
          if (onBack) {
            onBack();
          } else {
            router.back();
          }
        },
        onCancel() {
          // 用户取消操作
        },
      });
    } else {
      if (onBack) {
        onBack();
      } else {
        router.back();
      }
    }
  };

  return (
    <div className="justify-left flex items-center">
      {/* <Button type="text" onClick={handleBack}>
        <SvgIcon icon="ic-back" color="#6C7180" size={size ?? 20} />
      </Button> */}
      <SvgIcon onClick={handleBack} icon="arrow-left" color="#4E5969" size={size ?? 20} className='mr-2' />

      <span style={titleStyle}>{title}</span>
    </div>
  );
}
